import React from 'react';
import { Link } from 'react-router';
import { Breadcrumb, Button, Form, Input, Table, Row, Col, Select, Pagination,  DatePicker, Popover  } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;


let List = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },

    getInitialState() {
        return {
            data: [],
            pagination: {
                current: 1,
                pageSize: 10
            }
        }
    },

    componentDidMount() {
        this.handleSearch();
    },

    handleSearch() {
        this.setState({
          pagination: {
            current: 1
          }
        })
        this.fetch();
    },
  handleReset() {
    this.props.form.resetFields();
  },
     fetch() {
     let page = this.state.pagination.current;
     let forms = this.props.form.getFieldsValue();
     let params = Object.assign({}, {pageSize: 10, currentPage: page}, forms)
     let _me = this
     Utils.sendAjax({
     url: '/statistic/owner',
     data: JSON.stringify(params),
     callback: function (result) {
     if (result.code == '200') {
     _me.setState({
     data: result.data,
     pagination: result.page
     })
     }
     }
     })
     },

    startDateonChange(value, dateString){
        console.log(value, dateString);
    },

    rowKey(data) {
        return data.id;
    },

    handleTableChange(pagination) {
        const pager = this.state.pagination;
        pager.current = pagination.current;
        this.setState({
            pagination: pager
        });
        this.fetch();
    },


    render () {
        const { getFieldProps } = this.props.form;


        const columns = [{
            title: '房源地址',
            dataIndex: 'address',
        }, {
            title: '业主姓名',
            dataIndex: 'ownerName',
        }, {
            title: '联系电话',
            dataIndex: 'mobilePhone',
        }, {
            title: '房屋情况',
            dataIndex: 'status',
        }, {
            title: '房屋租金',
            render:(text,record) =>{
                let  rentTime;
                let  content;
                rentTime=record.rentTimeList.map((item)=>{
                    return (
                      <Row key={`item-${item.id}`}>
                          <Col span={8}>
                              {item.rent}
                          </Col>
                          <Col span={8}>
                              {item.startTime}
                          </Col>
                          <Col span={8}>
                              {item.expireTime}
                          </Col>
                      </Row>
                    );
                });
                content = (
                  <div style={{minWidth:300}}>
                      <Row>
                          <Col span={8}>
                             租金
                         </Col>
                          <Col span={8}>
                              开始时间
                          </Col>
                          <Col span={8}>
                              结束时间
                          </Col>
                      </Row>
                      {rentTime}
                  </div>
                );

                return (
                  record.tenementContractId == 0 ?
                    record.rent
                    : <Popover placement="right" content={content} title="租金详情" trigger="click">
                  <a>租金</a>
                  </Popover>
                )
            }
        }, {
            title: '已付租金',
            dataIndex: 'payRent',
        }, {
            title: '合同开始时间',
            dataIndex: 'startTime',
        }, {
            title: '合同结束时间',
            dataIndex: 'endTime',
        }, {
            title: '退租日期',
            dataIndex: 'cancelTime',
        }, {
            title: '付款方式',
            dataIndex: 'collectName',
        }, {
            title: '房屋状态',
            dataIndex: 'contractStatus',
        } ];


      const statusProps = getFieldProps('status',{initialValue: ' '});
        return (

            <div>

                <div className="search-bar">
                    <Form inline>
                        <FormItem label="关键字">
                            <Input {...getFieldProps('roomName') } placeholder="房间名"/>
                        </FormItem>
                         <FormItem  label="联系电话">
                            <Input {...getFieldProps('mobilePhone') } placeholder="联系电话"/>
                        </FormItem>
                        <FormItem label="合同起止日期">
                            <DatePicker onChange={this.startDateonChange} />-
                            <DatePicker />
                        </FormItem>
                        <FormItem label="租房情况">
                            <Select {...statusProps} style={{width: 180}}>
                                <Option value=" ">全部</Option>
                                <Option value="1">合同到期</Option>
                                <Option value="2">提前退租</Option>
                                <Option value="3">在租</Option>
                            </Select>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
                          <Button type="default" onClick={this.handleReset}>重置</Button>
                        </FormItem>
                    </Form>
                </div>

          <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.data}
                       onChange={this.handleTableChange}
                       pagination={this.state.pagination}/>
            </div>
          

        );
    }
});

List = Form.create()(List);
export default List